<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <style type="text/css">
     .style1{
         width: 100px;
         height: 100px;
         background: purple;
     }
     .style2{
         width: 100px;
         height: 100px;
         background: blue;
     }
    </style>
</head>
<body>
   <div>hello</div>
   <button id="btn1">按钮</button>

<script>
    /*方法一*/
  /*  $(document).ready(function(){
      $("div").css("width","100px");
      $("div").css("height","100px");
      $("div").css("background","blue");
    });*/
    /*方法二*/
   /* $(document).ready(function(){
            $("div").css({
                width:"100px",
                height:"100px",
                background:"red",
            });
    });*/
    /*方法三：在css里面加信息*/
    $("div").addClass("style1");
    $("div").click(function(){
        $(this).addClass("style2");
    })

    /*移除 removeClass（）   先增加再移除再增加。。周而复始 toggleClass（） */
</script>
</body>
</html>